<template>
  <n-flex justify="center" vertical>
    <n-space bordered>
      <n-avatar round :src="logo"/>
      <n-button size="medium" :strong="true" type="success" quaternary style="font-size: 30px">SureBet</n-button>
    </n-space>
    <n-divider/>
    <n-flex justify="center" vertical style="margin-top: 40px">
      <n-dropdown trigger="hover" :options="options" @select="handleSelect" v-if="!displayFlag">
        <n-button type="warning" dashed>
          添加账号
        </n-button>
      </n-dropdown>

      <n-flex justify="center" align="center" bordered style="">
        <n-button strong secondary type="warning">
          平博账号:
        </n-button>
        <n-text style="color: red; font-weight: bold">{{ pbLoginStatus ? "已登录" : "未登录" }}</n-text>
      </n-flex>

      <n-space vertical style="margin-left: 8px;">
        <n-space>
          <n-text>
            账号:
          </n-text>
          <n-gradient-text :size="15" style="color: #e4b073; font-weight: bold">
            {{ userContextStore.pbUserInfo.userId }}
          </n-gradient-text>
        </n-space>
        <n-space>
          <n-text>
            账号ID:
          </n-text>
          <n-gradient-text type="error" :size="15" style="color: #e4b073; font-weight: bold">
            {{ userContextStore.pbUserInfo.userName }}
          </n-gradient-text>
        </n-space>

        <n-space>
          <n-text>
            余额:
          </n-text>
          <n-gradient-text type="error" :size="15" style="color: #b30f62; font-weight: bold">
            {{ userContextStore.pbUserInfo.balance }}
          </n-gradient-text>
        </n-space>

        <n-space>
          <n-button @click="createPbWindow">
            打开
            <template #icon>
              <n-icon>
                <svg t="1725948313114" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="1464" width="200" height="200">
                  <path
                    d="M512 537.6a230.4 230.4 0 1 1 0-460.8 230.4 230.4 0 0 1 0 460.8z m0-51.2a179.2 179.2 0 1 0 0-358.4 179.2 179.2 0 0 0 0 358.4z"
                    fill="#758DFF" p-id="1465"></path>
                  <path
                    d="M947.2 921.6a25.6 25.6 0 1 1-51.2 0 382.464 382.464 0 0 0-101.7344-260.4032 25.6 25.6 0 1 1 37.5808-34.7136A433.664 433.664 0 0 1 947.2 921.6zM512 486.4a25.6 25.6 0 1 1 0 51.2A384 384 0 0 0 128 921.6a25.6 25.6 0 1 1-51.2 0A435.2 435.2 0 0 1 512 486.4z"
                    fill="#758DFF" p-id="1466"></path>
                </svg>
              </n-icon>
            </template>
          </n-button>
          <n-button @click="getPbUserInfo">
            刷新
            <template #icon>
              <n-icon>
                <svg t="1725943249545" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4396" width="200" height="200">
                  <path
                    d="M824.6 611.3c-3.2 165-138 297.8-303.8 297.8-167.8 0-303.9-136.1-303.9-303.9S353 301.3 520.8 301.3v-91.7c-218.5 0-395.6 177.1-395.6 395.6s177.1 395.6 395.6 395.6c216.5 0 392.3-173.8 395.6-389.5h-91.8z"
                    fill="#5F5F5F" p-id="4397"></path>
                  <path d="M839.9 265.7L520.8 64.2l-0.1 374.2z" fill="#5F5F5F" p-id="4398"></path>
                </svg>
              </n-icon>
            </template>
          </n-button>

        </n-space>
      </n-space>

      <div v-if="displayFlag">
        <n-flex justify="center" align="center" bordered style="margin-top: 20px">
          <n-button strong secondary type="success">
            {{ msgDisplay }}:
          </n-button>
          <n-text style="color: red; font-weight: bold">{{ imLoginStatus ? "已登录" : "未登录" }}</n-text>
        </n-flex>

        <n-space vertical style="margin-left: 8px;">
          <n-space>
            <n-text>
              账号:
            </n-text>
            <n-gradient-text :size="15" style="color: #e4b073; font-weight: bold">
              {{ userContextStore.imUserInfo.userId }}
            </n-gradient-text>
          </n-space>
          <n-space>
            <n-text>
              账号ID:
            </n-text>
            <n-gradient-text type="error" :size="15" style="color: #e4b073; font-weight: bold">
              {{ userContextStore.imUserInfo.userName }}
            </n-gradient-text>
          </n-space>

          <n-space>
            <n-text>
              余额:
            </n-text>
            <n-gradient-text type="error" :size="15" style="color: #b30f62; font-weight: bold">
              {{ userContextStore.imUserInfo.balance }}
            </n-gradient-text>
          </n-space>

          <n-space>
            <n-button @click="createPbWindow">
              打开
              <template #icon>
                <n-icon>
                  <svg t="1725948313114" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="1464" width="200" height="200">
                    <path
                      d="M512 537.6a230.4 230.4 0 1 1 0-460.8 230.4 230.4 0 0 1 0 460.8z m0-51.2a179.2 179.2 0 1 0 0-358.4 179.2 179.2 0 0 0 0 358.4z"
                      fill="#758DFF" p-id="1465"></path>
                    <path
                      d="M947.2 921.6a25.6 25.6 0 1 1-51.2 0 382.464 382.464 0 0 0-101.7344-260.4032 25.6 25.6 0 1 1 37.5808-34.7136A433.664 433.664 0 0 1 947.2 921.6zM512 486.4a25.6 25.6 0 1 1 0 51.2A384 384 0 0 0 128 921.6a25.6 25.6 0 1 1-51.2 0A435.2 435.2 0 0 1 512 486.4z"
                      fill="#758DFF" p-id="1466"></path>
                  </svg>
                </n-icon>
              </template>
            </n-button>
            <n-button @click="getPbUserInfo">
              刷新
              <template #icon>
                <n-icon>
                  <svg t="1725943249545" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="4396" width="200" height="200">
                    <path
                      d="M824.6 611.3c-3.2 165-138 297.8-303.8 297.8-167.8 0-303.9-136.1-303.9-303.9S353 301.3 520.8 301.3v-91.7c-218.5 0-395.6 177.1-395.6 395.6s177.1 395.6 395.6 395.6c216.5 0 392.3-173.8 395.6-389.5h-91.8z"
                      fill="#5F5F5F" p-id="4397"></path>
                    <path d="M839.9 265.7L520.8 64.2l-0.1 374.2z" fill="#5F5F5F" p-id="4398"></path>
                  </svg>
                </n-icon>
              </template>
            </n-button>

          </n-space>
        </n-space>

      </div>

      <n-divider/>
    </n-flex>
  </n-flex>
</template>

<script setup>
import logo_icon from '@/assets/images/dear.jpg'
import {h, onMounted, ref} from "vue";
import {PersonCircleOutline as UserIcon} from '@vicons/ionicons5'
import {NIcon, useMessage} from "naive-ui";
import {ipc} from '@/utils/ipcRenderer';
import {ipcApiRoute, specialIpcRoute} from "@/api/rpcRouter";
import {useContextStore} from '@/stores/userContext';


const userContextStore = useContextStore();
const message = useMessage()

const pbLoginStatus = ref(false)
const msgDisplay = ref("")


const displayFlag = ref(false)
const imLoginStatus = ref(false)


onMounted(() => {
  init()
});

const init = () => {
  ipc.removeAllListeners(specialIpcRoute.pb_user_context_chanel)

  ipc.on(specialIpcRoute.pb_user_context_chanel, (event, result) => {
    if (result && result.userId) {
      pbLoginStatus.value = true
      userContextStore.setPbUserInfo(result)
    }
  })
}


function handleSelect(item) {
  if (item === 'im_platform') {
    msgDisplay.value = "IM体育"
    displayFlag.value = true
  }
  if (item === '188_platform') {
    msgDisplay.value = "188体育"
    displayFlag.value = true
  }
  if (item === 'wd_platform') {
    message.warning("还没有实现,敬请期待!");
  }
}

function renderIcon(icon) {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon)
    });
  };
}

const getPbUserInfo = () => {
  ipc.invoke(ipcApiRoute.getPbAccount, "").then(data => {
    if (data) {
      window.$message.success("刷新用户信息成功")
      userContextStore.setPbUserInfo(data)
      pbLoginStatus.value = true
    }
  }).catch(err => {
    window.$message.error("刷新失败",err)
  })
}

// 打开平博子窗口
const createPbWindow = () => {
  ipc.invoke(ipcApiRoute.createPbWebWin, null).then(response => {

  })
}

const logo = ref(logo_icon)

const options = ref([
  {
    label: 'IM体育',
    key: 'im_platform',
    icon: renderIcon(UserIcon)
  }
])
</script>

<style scoped>

</style>
